<nav aria-label="breadcrumb">
  <ol class="breadcrumb container bg-white">
    <li class="breadcrumb-item"><a href="#">Rogue的博客</a></li>
    <li class="breadcrumb-item active" aria-current="page">编辑博客</li>
  </ol>
</nav>
<div class="blog-new container bg-white pt-3">
  <form (ngSubmit)="updateArticle();" #articleForm="ngForm">

    <div class="form-row">
      <div class="form-group col-9">
        <label class="font-weight-bold" for="articleName">文章标题</label><span class="text-danger">*</span>
        <input type="text" maxlength="50" class="form-control" placeholder="文章标题，字数控制在50字以内" id="articleName" required
          [(ngModel)]="article.articleName" name="articleName" #articleName="ngModel">
        <div [hidden]="articleName.valid || articleName.pristine" class="text-danger">
          请输入文章标题。
        </div>
        <div [hidden]="!articleExists" class="alert alert-danger">
          {{article.articleName}}已经存在，请重新输入。
        </div>
      </div>
      <div class="form-group col-3">
        <label class="font-weight-bold" for="articleCategory">文章分类</label>
        <span class="text-danger">*</span>
        <span class="add-catalog-btn" data-toggle="modal" data-target="#addCategoryModal">
          <fa-icon [icon]="['fas', 'plus']"></fa-icon>
        </span>
        <select class="form-control" id="articleCategory" required [(ngModel)]="article.articleCategory" name="articleCategory"
          #articleCategory="ngModel">
          <option *ngFor="let category of allArticleCategorys" [value]="category.categoryId">{{category.categoryName}}</option>
        </select>
        <div [hidden]="articleCategory.valid || articleCategory.pristine" class="text-danger">
          请选择文章分类。
        </div>
      </div>
    </div>
    <div class="form-row">
      <div class="form-group col">
         <ckeditor name="articleContent" [(ngModel)]="article.articleContent" [config]="ckeditorConfig"></ckeditor>
      </div>
    </div>
    <div class="form-row m-auto btns">
      <div class="form-group col">
        <input class="btn btn-success" type="submit" value="保存文章" [disabled]="!articleForm.form.valid">
      </div>
    </div>
  </form>
</div>
<!-- addCategoryModal -->
<div class="modal" id="addCategoryModal" tabindex="-1" role="dialog" aria-labelledby="addCategoryModalLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <form (ngSubmit)="addArticleCategory();" #categoryForm="ngForm">
        <div class="modal-header">
          <h5 class="modal-title" id="addCategoryModalLabel">添加分类</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label for="exampleInputEmail1">分类名称</label>
            <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="请输入分类名称"
              required [(ngModel)]="newArticleCategory" name="newArticleCategory" #category="ngModel">
            <div [hidden]="category.valid || category.pristine" class="text-danger">
              请输入分类名称。
            </div>
            <div [hidden]="!newArticleCategoryExists" class="alert alert-danger">
              {{newArticleCategory}}已经存在，请重新输入。
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
          <button type="submit" class="btn btn-success" [disabled]="!categoryForm.form.valid">添加分类</button>
        </div>
      </form>
    </div>
  </div>
</div>
